<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="progress-bar"></div>
    <script>
        const taskId = '123';
        const eventSource = new EventSource(`http://localhost:1983/sse/task/${taskId}`);
        // watch "progressUpdate" event
        eventSource.addEventListener('progressUpdate', (event) => {
            const data = JSON.parse(event.data);
            console.log('Task update progress', data);
            // Web update progress bar (Like Vue/React component tatus)
            // updateProgressBar(data.progress);
            const bar = document.getElementById('progress-bar');
            bar.style.width = `${data.progress}%`;
            bar.textContent = `${data.progress}%`;
            bar.style.color = data.progress === 100 ? 'green' : 'black';

            // Close connection after task completed
            if (data.progress === 100) {
                eventSource.close();
            }
        });

        // Listen connection error
        eventSource.onerror = (error) => {
            console.error('SSE connection error:', error);
            eventSource.close();
        };
    </script>
</body>

</html>